<template>
  <view>
    <view>
      <view class="live-list" :style="'padding:0 ' + (decoretionProperties.pagePadding+'px')">
        <block v-for="(item, index) in liveList" :key="index">
          <view class="live-list-item">
            <image :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
              :src="item.shareImg"></image>
            <view class="live-item-head">
              <span class="head-live" v-if="item.status === 101">
                <image src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/live.png"></image>
                直播中
              </span>
              <span class="head-no-live" v-if="item.status === 102">未开始</span>
              <span v-if="item.status === 103" class="head-no-live head-done-live">已结束</span>
              <span v-if="item.status === 104" class="head-no-live head-done-live">禁播</span>
              <span v-if="item.status === 105" class="head-no-live head-done-live">暂停中</span>
              <span v-if="item.status === 106" class="head-no-live head-done-live">异常</span>
              <span v-if="item.status === 107" class="head-no-live head-done-live">已过期</span>
              <span class="head-text">{{item.viewCount || 0}}{{" "}}观看</span>
            </view>
            <view style="background:rgba(0,0,0, .05);height:130rpx;width:100%;bottom:0;position:absolute;">
              <view :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
                class="live-item-center">
                {{item.liveName}}
              </view>
              <view class="live-item-bottom">
                <view :data-count="item.viewCount" :data-room_id="item.roomId" :data-id="item.id" @tap.stop="onGotoLive"
                  class="live-anchor">
                  {{item.anchor}}
                </view>
                <view class="live-like">
                  <image class="like-gif" v-if="item.clickLike"
                    src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/dong_live.gif"></image>
                  <image :data-count="item.likeCount" :data-room_id="item.roomId" :data-id="item.id"
                    @tap.stop="onClickLike" src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/like.png">
                  </image>
                  {{item.likeCount || 0}}
                </view>
              </view>
            </view>
          </view>
        </block>
        <loading v-if="isFetch"></loading>
        <view class="no-live-data" v-if="liveList.length === 0 && !isFetch">暂无直播!</view>
      </view>
       <u-loading-page loading-text="loading..." :loading="loading" bg-color="rgba(0,0,0,0.4)"></u-loading-page>
      <block v-if="!loading&&total !== 0">
        <view v-if="liveList.length >= total" class="live-tip">到底了~</view>
      </block>
    </view>
  </view>
</template>

<script lang="ts">
  import {
    Component,
    Mixins
  } from 'vue-property-decorator'
  import LiveMix from "@/mixins/live";
  @Component({})
  export default class Live extends Mixins(LiveMix) {

    name = "live";

    get isCurrent() {
      return this.$store.state.settingStore.currentTab === this.name;
    }

    // 组件周期函数--监听组件挂载完毕
    mounted() {
      uni.setNavigationBarTitle({
        title: "直播",
      });
      this.fetchLiveList(1);
    }

    onReachBottom() {
      this.liveList.length < this.total &&
        this.fetchLiveList(this.current + 1, true);
    }

    /**
     * 页面离开
     */
    async onDetached() {
      clearInterval(this.timer);
    }
  }
</script>

<style lang="scss" scoped>
  @include b(live-loading) {
    width: 100%;
    height: 100rpx;
  }

  @include b(live-tip) {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    color: #b0b0b0;
    font-size: 24rpx;

    @include e(loadMore) {
      background-color: #ffffff;
      color: #333333;
    }
  }

  @include b(live-list) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 24rpx;
  }

  @include b(live-list-item) {
    width: 49%;
    height: 380rpx;
    margin-bottom: 14rpx;
    position: relative;

    >image {
      width: 100%;
      height: 100%;
      background-color: #666;
      object-fit: cover;
    }
  }

  @include b(live-item-head) {
    position: absolute;
    top: 8rpx;
    left: 16rpx;

    image {
      width: 90rpx;
      height: 30rpx;
      vertical-align: middle;
    }
  }

  @include b(live-item-bottom) {
    position: absolute;
    bottom: 16rpx;
    padding: 0 16rpx;
    display: flex;
    justify-content: space-between;
    line-height: 40rpx;
    font-size: 24rpx;
    width: 100%;
    height: 40rpx;
    color: #fff;

    image {
      width: 30rpx;
      height: 30rpx;
      vertical-align: middle;
    }
  }

  @include b(live-like) {
    position: relative;
  }

  @include b(like-gif) {
    width: 400rpx !important;
    height: 200rpx !important;
    position: absolute;
    bottom: 30rpx;
    right: -100rpx;
  }

  @include b(head-text) {
    display: inline-block;
    vertical-align: middle;
    line-height: 30rpx;
    font-size: 22rpx;
    padding: 0 12rpx;
    color: #fff;
    background-color: rgba(0, 0, 0, .1);
  }

  @include b(live-item-center) {
    color: #fff;
    font-size: 24rpx;
    bottom: 90rpx;
    left: 16rpx;
    position: absolute;
  }

  @include b(head-live) {
    background-image: url(http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/Live/dong.png);
    overflow: hidden;
    background-position: center;
    ;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #fff;
    padding: 0 12rpx;

    image {
      width: 24rpx;
      height: 22rpx;
      vertical-align: middle;
    }
  }

  @include b(head-no-live) {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 22rpx;
    line-height: 30rpx;
    color: #fff;
    padding: 0 12rpx;
    padding-left: 24rpx;
    background-color: rgba(0, 226, 100, 1);

    &::before {
      content: '';
      width: 8rpx;
      height: 8rpx;
      border-radius: 8rpx;
      display: block;
      position: absolute;
      left: 8rpx;
      top: 50%;
      margin-top: -4rpx;
      background-color: #fff;
    }
  }

  .head-done-live {
    background-color: #666;
  }

  @include b(no-live-data) {
    text-align: center;
    line-height: 400rpx;
    width: 100%;
  }
</style>